<template>
	<view class="page">
		<view class="forms">
			<uni-forms ref="formData" :model="formData" :rules="rules" labelPosition="top" labelWidth="120px">
				<uni-forms-item label="真实姓名" name="name" required>
					<input v-model="formData.name" type="text" placeholder="请输入真实姓名">
				</uni-forms-item>
				<uni-forms-item label="证件类型" name="type" required>
					<select>
						<!--证件类型选择-->
						<option>居民身份证 </option>
						<option>其他证件 </option>
					</select>
				</uni-forms-item>
				<uni-forms-item label="证件号码" name="idNumber" required>
					<input v-model="formData.idNumber" type="text" name="id_card" placeholder="请输入您的证件号码">
				</uni-forms-item>
				<uni-forms-item label="入校原因" name="reason" required>
					<input v-model="formData.reason" type="text" name="reason" placeholder="请输入入校原因">
				</uni-forms-item>
				<uni-forms-item label="入校时间" name="time" required>
					<uni-datetime-picker type="datetime" return-type="string" v-model="formData.time" />
				</uni-forms-item>
				<uni-forms-item label="始发地" name="originLocation" required>
					<input v-model="formData.originLocation" type="text" placeholder="请输入你的始发地">
				</uni-forms-item>
				<uni-forms-item label="乘坐交通工具" name="vehicle" required>
					<input v-model="formData.vehicle" type="text" placeholder="请输入乘坐的交通工具(具体到车次航班等)">
				</uni-forms-item>
				<uni-forms-item label="核酸检测报告上传" name="pcr" required>
					<PcrImageSelect :content="'核酸检测报告图片'" @updateRef="updatePcr"></PcrImageSelect>
				</uni-forms-item>
				<uni-forms-item label="健康码照片上传" name="img" required>
					<HcodeImageSelect :content="'上传48h之内健康码照片'" @updateRef="updateImg"></HcodeImageSelect>
				</uni-forms-item>
				<uni-forms-item label="行程码照片上传" name="tc" required>
					<TcImageSelect :content="'上传48h之内行程码照片'" @updateRef="updateTc"></TcImageSelect>
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<input v-model="formData.remark" type="text" placeholder="请输入你的备注信息">
				</uni-forms-item>
			</uni-forms>
		</view>
		<button type="primary" @click="submit">提交</button>

	</view>
</template>

<script>
	import request from '@/utils/api.js'
	import PcrImageSelect from '@/components/ImageSelect.vue'
	import HcodeImageSelect from '@/components/ImageSelect.vue'
	import TcImageSelect from '@/components/ImageSelect.vue'
	export default {
		data() {
			let userInfo = uni.getStorageSync("userInfo");
			return {
				type: [{
					value: 0,
					text: "居民身份证"
				}, {
					value: 1,
					text: "其他证件"
				}, ],
				formData: {
					type: [2],
					name: userInfo.name,
					idNumber: userInfo.idCard,
					originLocation: "",
					reason: "",
					remark: "",
					time: "",
					img: "",
					tc: "",
					pcr: "",
					vehicle: "", //返校车次信息
					// state:'',//状态标识0:申请成功，1：申请失败，2：待处理，3：已失效
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: "姓名不能为空"
						}]
					},
					idNumber: {
						rules: [{
							required: true,
							errorMessage: "该项不能为空"
						}]
					},
					originLocation: {
						rules: [{
							required: true,
							errorMessage: "该项不能为空"
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: "该项不能为空"
						}]
					},
					time: {
						rules: [{
							required: true,
							errorMessage: "该项不能为空"
						}]
					},
					vehicle: {
						rules: [{
							required: true,
							errorMessage: "该项不能为空"
						}]
					},
					img: {
						rules: [{
							required: true,
							errorMessage: "健康码图片不能为空"
						}]
					},
					tc: {
						rules: [{
							required: true,
							errorMessage: "行程码图片不能为空"
						}]
					},
					pcr: {
						rules: [{
							required: true,
							errorMessage: "核酸报告图片不能为空"
						}]
					}, //核酸图片
				}
			};
		},
		methods: {
			updatePcr(ref) {
				this.formData.pcr = ref
			},
			updateImg(ref) {
				this.formData.img = ref
			},
			updateTc(ref) {
				this.formData.tc = ref
			},
			submit() {
				let that = this
				//validate()进行表单校验
				//TODO表单提交失败
				this.$refs.formData.validate((err, formData) => {
					if (err === null) {
						request('/application/in/record', {
							'idCard': that.formData.idNumber,
							'img': that.formData.img,
							'name': that.formData.name,
							'originLocation': that.formData.originLocation,
							'pcr': that.formData.pcr,
							'reason': that.formData.reason,
							'remark': that.formData.remark,
							'state': 0,
							'tc': that.formData.tc,
							'time': that.formData.time,
							'vehicle': that.formData.vehicle
						}, 'POST').then(resp => {
							if (resp.code === 200) {
								uni.showToast({
									title: `提交成功`
								});
								console.log("success", formData);
								uni.navigateBack({
									delta:1
								})
								return;
							}
							console.log('resp',resp)
						}).catch( err =>{
							consolo.log('err',err)
						})
					}
				});
			}
		},
		components: {
			PcrImageSelect,
			HcodeImageSelect,
			TcImageSelect
		}
	}
</script>

<style>
	.page {
		margin: 5px 20px;
	}

	.top {
		/* display: flex; */
		width: 100%;
		height: 44px;
		background-color: #70C0DB;
	}

	.top .content {
		width: 100%;
		/* height: 44px; */
		padding-top: 12px;
		/* border:1px solid red; */
	}

	.top .iconfont {
		font-size: 20px;
		padding-left: 12px;
		color: #FFF;
	}

	.top .center {
		font-size: 20px;
		padding-left: 120px;
		color: #FFF;
		text-align: center;
	}

	input {
		border-bottom: 1px solid #BBBBBB;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		width: 100%;
		height: 49px;
		font-size: 18px;
		margin-bottom: 22px;
	}

	.btn {
		margin-bottom: 22px;
		position: relative;
		display: inline-block;
		width: 100%;
		height: 160px;
		overflow: hidden;
		text-align: center;
		vertical-align: center;
		border-radius: 3px;
		background-color: rgb(246, 246, 249);

	}

	.btn input {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.iconfont {
		color: #1890FF;
		font-size: 47px;
	}

	.btn .little {
		margin-top: 10px;
		font-size: 12px;
		color: #AEAEB2;
	}

	.btn2 {
		margin-bottom: 22px;
		position: relative;
		display: inline-block;
		width: 100%;
		height: 160px;
		overflow: hidden;
		text-align: center;
		vertical-align: center;
		border-radius: 3px;
		background-color: rgb(246, 246, 249);

	}

	.btn2 input {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.btn2 .little {
		margin-top: 10px;
		font-size: 12px;
		color: #AEAEB2;
	}

	.btn3 {
		margin-bottom: 22px;
		position: relative;
		display: inline-block;
		width: 100%;
		height: 160px;
		overflow: hidden;
		text-align: center;
		vertical-align: center;
		border-radius: 3px;
		background-color: rgb(246, 246, 249);

	}

	.btn3 input {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.btn3 .little {
		margin-top: 10px;
		font-size: 12px;
		color: #AEAEB2;
	}
</style>
